<template>
  <div>
    <ZForm :model="userInfo" :rules="rules" ref="loginForm">
      <ZFormItem label="用户名" prop="username">
        <ZInput v-model="userInfo.username" placeholder="请输入用户名"></ZInput>
      </ZFormItem>
      <ZFormItem label="密码" prop="password">
        <ZInput
          type="password"
          v-model="userInfo.password"
          placeholder="请输入密码"
        ></ZInput>
      </ZFormItem>
      <!-- 提交 -->
      <ZFormItem>
        <button @click="login">登录</button>
      </ZFormItem>
    </ZForm>
  </div>
</template>

<script>
import ZInput from "./ZInput";
import ZFormItem from "./ZFormItem";
import ZForm from "./ZForm";
import Notice from "../Notice.vue";
export default {
  components: {
    ZInput,
    ZFormItem,
    ZForm,
  },
  data() {
    return {
      userInfo: {
        username: "tom",
        password: "",
      },
      rules: {
        username: [{ required: true, message: "请输入用户名称" }],
        password: [{ required: true, message: "请输入密码" }],
      },
    };
  },
  methods: {
    login() {
      //获取ZForm上的实例，调用validate方法
      this.$refs["loginForm"].validate((valid) => {
        // if (valid) {
        //   alert("submit");
        // } else {
        //   console.log("error submit!");
        //   return false;
        // }
        const notice = this.$create(Notice, {
          title: "Vue弹窗组件原理",
          message: valid ? "请求登录!" : "校验失败!",
          duration: 2000,
        });
        notice.show();
      });
    },
  },
};
</script>

<style lang="scss" scoped>
</style>